<template>
	<view style="padding: 10px;width: 100%;">
		<view>
			<view style="text-align: center; font-size: 35upx; font-weight: 600;">{{notice.msg}}</view>
			<view v-html="notice.detail" class="input_content1"></view>
			<view style="text-align: right;">
				{{notice.createDate | dateFormat("YYYY年MM月DD日 HH时mm分")}}
			</view>		
		</view>
		<view style="width: 100%;">
			<uni-list>
				<view style="font-size: 32upx;">附件:</view>
					<view v-for="(item,index) in codearr" @tap="goTo(item.url)" :key="index" id="fujian">{{item.name}}</view>
			</uni-list>
		</view>
	</view>
	
</template>
<script>
import uniSection from '@/components/uni-section/uni-section.vue';
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';

import loginjs from '../../login.js';
import { mapState } from 'vuex';
export default {
	components: {
		uniSection,
		uniList,
		uniListItem
	},
	computed: mapState(['baseUrl']),
	data() {
		return {
			webviewStyles: {
				progress: {
					olor: '#FF3333'
				}
			},
			//star
			lists: ['A', 'B', 'C', 'D', 'E'],
			extraIcon1: {
				color: '#007aff',
				size: '22',
				type: 'gear-filled'
			},
			extraIcon2: {
				color: '#4cd964',
				size: '22',
				type: 'image'
			},
			//end
			noticeId: null,
			notice: {},
			codearr: []
		};
	},
	onLoad(option) {
		this.noticeId = option.noticeId;
		this.getNoticeById(this.noticeId);
	},
	// 超出部分隐藏过滤器
	filters:{
		hidden:function (str) {
		                var strLen = str.length
						 console.log(strLen);
		                // if(strLen >=16 ){
		                //    var newStr = str.substring(3,str.indexOf("</p>"))+"...";
		                //    return newStr;
		                // }else{
		                //     return str;
		                // }
						if(strLen<=12){
							var newStr = str.substring(3,str.indexOf("</p>"));
							return newStr;
						}else if(strLen>12){
							var newStr1 = str.substring(3,11)+"...";
							return newStr1;
						}
		            }
	},
	
	onload(option) {
		//获取穿过来的noticeid
		this.noticeId = options.noticeId;
		this.getNoticeById(this.noticeId);
	},
	methods: {
		goTo(val) {
			console.log(val);
			if (val == null) {
				return;
			}
			plus.runtime.openURL(val, function(e) {
				console.log(e);
			});
		},
		errorback(e) {
			console.log(e);
		},

		// api/notice/page?appName=3213165”listGET
		// api/notice/{id}  GET

		getNoticeById(val) {
			//发送请求获取该id对应的通告消息
			//获取当前登录认证消息
			var authorization = loginjs.getAuthorization();
			if (val == null) {
				uni.showToast({
					title: '不存在此条数据',
					icon: 'none',
					duration: 1000
				});
			}

			uni.request({
				url: this.baseUrl + 'api/notice/' + val,
				method: 'GET',
				header: {
					Authorization: authorization
				},
				success: res => {
					if (res.data.code == 200) {
						if (res.data.data == null) {
							uni.showToast({
								title: '数据为空',
								icon: 'none',
								duration: 1000
							});

							return;
						}
						this.notice = res.data.data;
						this.codearr = JSON.parse(res.data.data.code);

						uni.showToast({
							title: '获取数据成功',
							icon: 'none',
							duration: 1000
						});
					}
				},
				fail() {
					uni.showToast({
						title: '获取数据异常',
						icon: 'none',
						duration: 1000
					});
				}
			});
		}
	}
};
</script>

<style>
/* .context {
	line-height: 10px;
} */
.spa >>> *{
	float: left;
	overflow:hidden;//超出的隐藏
	text-overflow:ellipsis;//省略号
	white-space:nowrap;//强制一行显示
}
</style>
<style scoped lang="scss">
	::v-deep #fujian {
	 color: #1E90FF;
	 border-bottom: 1px solid #DCDFE6;
	}
	.mycontent {
		background-color: #efeff4;
	}

	/* 列式弹性盒子 */
	.flex_col {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
	}

	/* 弹性盒子弹性容器 */
	.flex_col .flex_grow {
		width: 0;
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
	}

	.flex_row .flex_grow {
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
	}

	/* 弹性盒子允许换行 */
	.flex_col.flex_wrap {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	/* 列表 */
	.list {
		// background-color: #fff;
		font-size: 28upx;
		color: #333;
		user-select: none;
		touch-callout: none;

		&>view {
			padding: 24upx 30upx;
			position: relative;

			&:active,
			&.active {
				// background-color: #f3f3f3;
			}

			image {
				height: 80upx;
				width: 80upx;
				border-radius: 4px;
				margin-right: 20upx;
			}

			&>view {
				line-height: 40upx;

				.time,
				.info {
					color: #999;
					font-size: 24upx;
				}

				.time {
					width: 150upx;
					text-align: right;
				}

				.info {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		&>view:not(:first-child) {
			margin-top: 1px;

			&::after {
				content: '';
				display: block;
				height: 0;
				border-top: #CCC solid 1px;
				width: 620upx;
				position: absolute;
				top: -1px;
				right: 0;
				transform:scaleY(0.5);	/* 1px像素 */
			}
		}
	}

	/* 遮罩 */
	.shade {
		position: fixed;
		z-index: 100;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		-webkit-touch-callout: none;

		.pop {
			position: fixed;
			z-index: 101;
			width: 200upx;
			box-sizing: border-box;
			font-size: 28upx;
			text-align: left;
			color: #333;
			background-color: #fff;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
			line-height: 80upx;
			transition: transform 0.15s ease-in-out 0s;
			user-select: none;
			-webkit-touch-callout: none;
			transform: scale(0, 0);

			&.show {
				transform: scale(1, 1);
			}

			&>view {
				padding: 0 20upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				user-select: none;
				-webkit-touch-callout: none;

				&:active {
					// background-color: #f3f3f3;
				}
			}
		}
	}
</style>